/*功能说明:
1. 点击向右(左)的图标， 平滑切换到下(.上)一页
2. 无限循环切换:第一页的上一页为最后页，最后一页的下一页是第一页
3. 每隔3s自动滑动到下一页.
4. 当鼠标进入图片区域时， 自动切换停止， 当鼠标离开后，又开始自动切换
5. 切换页面时， 下面的圆点也同步更新
6. 点击圆点图标切换到对应的页
*/
$(function () {
    let $container = $("#container");
    let $list = $("#list");
    let $li = $("#buttons>li");
    console.log($li);
    let $prev = $("#prev");
    let $next = $("#next");
    const PAGE_WINTH = 520; //一页宽度
    const TIME = 400;       //翻页的时间
    const ITEM_TIME = 20;   //间隔时间 
    let imgCount = $li.length; //图片页数
    let index = 0;
    let bug = false; //标识是否正在翻页
    //1. 点击向右(左)的图标， 平滑切换到下(.上)一页  
    $next.click(function () {
        nextPage(true)
    })
    $prev.click(function () {
        nextPage(false)
    })
    function nextPage(next) {
        /**
         * 总的偏移量:offset
         * 总的时间:TIME=400
         * 间隔时间:ITEM_TIME=20
         * 偏移量:itemOffset = offset/(TIME/ITEM_TIME)
         */
        if (bug) {//已经正在翻页
            return;
        }
        bug = true;//标识正在翻页
        let offset = 0
        if (typeof next === 'boolean') {
            offset = next ? -PAGE_WINTH : PAGE_WINTH;   //总的偏移量
        } else {
            offset = -(next - index) * PAGE_WINTH
        }

        let itemOffset = offset / (TIME / ITEM_TIME);       //偏移量
        let currLeft = $list.position().left;           //当前left值
        let targetLeft = currLeft + offset //目标left值 
        let itmeId = setInterval(function () {
            currLeft += itemOffset;//新的left值
            if (currLeft == targetLeft) {//当当前位置与目标位置一致时清除定时器
                clearInterval(itmeId);
                bug = false;//翻页结束重置状态

                // 2. 无限循环切换:第一页的上一页为最后页，最后一页的下一页是第一页
                if (currLeft === -(imgCount + 1) * PAGE_WINTH) {
                    currLeft = -PAGE_WINTH;
                } else if (currLeft === 0) {
                    currLeft = -imgCount * PAGE_WINTH
                }
            }
            $list.css('left', currLeft);

        }, ITEM_TIME)
        // 5. 切换页面时， 下面的圆点也同步更新          
        updatePointr(next);
    }
    //更新圆点
    function updatePointr(next) {
        //计算出目标圆点的下标
        let targetIndex = 0;
        if (typeof next === 'boolean') {
            if (next) {
                targetIndex = index + 1;
                if (targetIndex == imgCount) {//此时看到的是1.jpg-->第一个圆点
                    targetIndex = 0
                }
            } else {
                targetIndex = index - 1;
                if (targetIndex == -1) {//此时看到的是5.jpg-->第五个圆点
                    targetIndex = imgCount - 1;
                }
            }
        } else {
            targetIndex = next;
        }
        //移除当前圆点样式
        $li.eq(index).removeClass('active');
        //给目标圆点添加class= 'no'
        $li.eq(targetIndex).addClass('active');
        //将index更新为targetIndex
        index = targetIndex;
    }
    // 3. 每隔3s自动滑动到下一页.
    let timeId = setInterval(function () {
        nextPage(true)
    }, 3000)
    // 4. 当鼠标进入图片区域时， 自动切换停止， 当鼠标离开后，又开始自动切换
    $container.hover(function () {
        clearInterval(timeId);
    }, function () {
        timeId = setInterval(function () {
            nextPage(true)
        }, 3000)
    })
    // 6. 点击圆点图标切换到对应的页
    $li.click(function () {
        //获取点击页下标
        let clickIndex = $(this).index()
        //只有当点击的不是当前页的圆点时才翻页
        if (clickIndex != index) {
            console.log(clickIndex);
            nextPage(clickIndex);
        }
    })
})

